<template>
  <div class="mine">
    <!-- 这是显示相册的页面 -->
    <div class="imageLists">
      <header class="header">
        <div class="header_left">我的相册</div>
      </header>
      <div class="lists_main">
        <!-- 这你自己引入一个FileCard组件 -->

        <!-- 在下面的盒子标签里添加弹窗的控制 -->
        <div v-for="album in imageList" class="lists_main_item">
          <div class="new_images_list" @click="see(album)">
            <i class="el-icon-picture-outline-round"></i>
          </div>
          <!-- 使用双大括号插值将相册名显示在页面上 -->
          <span>{{ album.name }}</span>
        </div>
        <!--        <div class="lists_main_item">-->
        <!--          <div class="new_images_list" >-->
        <!--            <i class="el-icon-picture-outline-round"></i>-->
        <!--          </div>-->
        <!--          <span>相册名{{ 相册名 }}</span>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="upload" @click="dialogVisible = true">+</div>

    <el-dialog title="创建相册" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="相册名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="相册描述">
          <el-input v-model="form.ms" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="create()">确 定</el-button>
      </span>
    </el-dialog>

    <div :title="title" :visible.sync="view" width="90%">
      <span>描述： {{ this.ms }}</span>

      <div class="demo-image__placeholder">
        <div v-for="(item, index) in List" :key="index">
          <el-image
            :src="item.imgUrl"
            fit="fill"
            style="width: 200px"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { create, getxc, view } from "@/api/image";

export default {
  data() {
    return {
      imageList: [],
      activeIndex: -1,
      contextMenuLeft: 0, // 右键菜单的左边距
      contextMenuTop: 0, // 右键菜单的上边距
      dialogVisible: false,
      form: {},
      view: false,
      List: [],
      title: "",
      ms: "",
    };
  },
  computed: {
    isContextMenuVisible() {
      return this.activeIndex !== -1; // 判断右键菜单是否可见
    },
  },
  mounted() {
    document.addEventListener("click", this.hideContextMenu); // 监听点击事件，用于隐藏右键菜单
  },
  created() {
    this.getList();
  },
  methods: {
    see(item) {
      this.view = true;
      view(item.id).then((res) => {
        console.log(res.data);
        this.List = res.data.list;
        this.title = res.data.name;
        this.ms = res.data.ms;
      });
    },
    // 创建相册
    create() {
      create(this.form).then((res) => {
        if (res.code === 200) {
          this.$message.success("创建成功");
          this.getList();
          this.dialogVisible = false;
        }
      });
    },
    getList() {
      getxc().then((res) => {
        this.imageList = res.data;
      });
    },
    showContextMenu(index, event) {
      event.preventDefault(); // 阻止默认的右键菜单弹出
      this.activeIndex = index; // 设置当前激活的索引为点击的索引
      this.contextMenuLeft = event.clientX; // 获取鼠标点击的水平位置
      this.contextMenuTop = event.clientY; // 获取鼠标点击的垂直位置
    },
    hideContextMenu() {
      this.activeIndex = -1; // 重置当前激活的索引
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  height: 100%;
  padding: 0 40px;
  padding-top: 24px;
  position: relative;

  .upload {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: rgb(99, 125, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    cursor: pointer;
    position: absolute;
    bottom: 50px;
    right: 50px;
  }
  .upload:hover {
    opacity: 0.9;
  }
  .upload-demo {
    margin: 0 auto;
  }

  .header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }
  .header_left {
    font-size: 18px;
    font-weight: 600;
    color: rgb(37, 38, 43);
    margin-left: 10px;
  }
  .imageLists {
    display: flex;
    flex-direction: column;
    .lists_main {
      display: flex;
      flex-wrap: wrap;
      gap: 20px; //行间距
      .lists_main_item {
        display: flex;
        flex-direction: column;
        color: #504e4e;
        cursor: pointer;
        .new_images_list {
          width: 182px;
          height: 190px;
          border-radius: 2px;
          background-color: rgb(132, 133, 141, 0.08);
          border: 1px solid rgba(86, 87, 90, 0.08);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: #504e4e;
          margin-bottom: 13px;
        }
      }
      .lists_main_item:hover {
        color: #397ed8;
      }
    }
  }

  .back {
    padding: 5px;
    cursor: pointer;
  }
  .back:hover {
    background-color: rgba(105, 105, 109, 0.08);
    border-radius: 4px;
  }
  .image_main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .demo-image__preview {
      height: 170px;
      width: 170px;
      margin-right: 10px;
      position: relative;
      .context_menu {
        position: fixed;
        z-index: 999;
        width: 150px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 13, 0, 0.5);
        border-radius: 5px;
        padding: 4px;
        .context_menu_items {
          list-style: none;
          padding: 0;
          margin: 0;

          .context_menu_item {
            height: 36px;
            border-radius: 5px;
            padding: 4px 4px;
            display: flex;
            align-items: center;

            .context_menu_item_icon {
              font-size: 16px;
              margin-right: 5px;
            }

            .context_menu_item_text {
              font-size: 15px;
              color: #504e4e;
            }
          }
          .context_menu_item.waring {
            color: rgb(255, 111, 102);
          }
          .context_menu_item.waring:hover {
            background-color: rgb(243, 91, 81, 0.12);
          }
          .context_menu_item:hover {
            background-color: rgba(132, 133, 141, 0.08);
          }
        }
      }
    }
  }
}
</style>
